<template>
  <!-- 快速登录界面 -->
  <div class="rapid-enrollment">
    <!-- 导航栏头部 -->
    <van-nav-bar title="快速登录"
                 left-arrow
                 @click-left="$router.back()" />
    <!-- 提示标签栏 -->
    <van-notice-bar color="#d1d9e0"
                    scrollable
                    background="#ecf9ff">
      为了确保服务质量,请输入账号（手机号和昵称都支持）及密码
    </van-notice-bar>
    <van-form @submit="onSubmit">
      <van-field v-model="username"
                 name="username"
                 label="用户名"
                 placeholder="请填写用户名(手机号或账户)"
                 :rules="[{ required: true, message: '请正确填写(手机号或昵称)!' }]" />
      <van-field v-model="password"
                 type="password"
                 name="password"
                 label="密码"
                 placeholder="请填写密码"
                 :rules="[{ required: true, message: '请正确填写密码!' }]" />
      <!-- 复选框 -->
      <van-field name="checkboxGroup"
                 label="">
        <template #input>
          <van-checkbox-group v-model="checkboxGroup"
                              direction="horizontal">
            <van-checkbox name="1"
                          shape="square"
                          @click="adddd"
                          :checked='ffoo'>同意<span style="color:#9acca8">&lt;&lt;W家政帮用户协议>></span>和<span style="color:#9acca8">&lt;&lt;隐私协议>></span></van-checkbox>
          </van-checkbox-group>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button block
                    type="info"
                    class="infobtn"
                    native-type="submit"
                    :disabled='ooff'>
          登录
        </van-button>
      </div>
    </van-form>
    <div class="toregiste"
         @click="$router.push('/QuickRegistration')">没有账号?去注册</div>
  </div>
</template>

<script>
import { setItem, getItem } from '@/mock/wsm.js'
export default {
  name: 'RapidEnrollment',
  props: {},
  components: {},
  data () {
    return {
      username: '',
      password: '',
      checkbox: false,
      checkboxGroup: [],
      ffoo: false,
      ooff: true
    }
  },
  created () {
    this.loader()
  },
  mounted () {

  },
  methods: {
    loader () {
      const getitemList = getItem('zhongqinghua')
      console.log(getitemList.password)
      this.username = getitemList.nicheng
      this.password = getitemList.password
    },
    adddd () {
      this.ooff = !this.ooff
    },
    onSubmit (values) {
      const getitemList = getItem('zhongqinghua')
      if (getitemList.nicheng === values.username && getitemList.password === values.password) {
        this.$toast('登录成功！')
        this.$router.push('/')
      } else if (getitemList.userphone === values.username && getitemList.password === values.password) {
        this.$toast('登录成功！')
        this.$router.push('/')
      } else {
        this.$toast('请输入正确的账号和密码！')
      }
      console.log('submit', values)
      console.log(values.username)
      // setItem('zhucelist', values)
      // getItem('zhucelist')
    }
  },
  computed: {
  }
}
</script>

<style scoped lang="less">
.van-nav-bar {
  height: 120px;
}
/deep/ .van-notice-bar__wrap {
  justify-content: center;
}
.van-cell {
  font-size: 24px;
}
.infobtn {
  background-color: #1196db;
  border: 1px solid transparent;
}
.toregiste {
  color: #1196db;
  font-size: 28px;
  margin-left: 30px;
}
</style>
